<template>
	<view class="container">
		<TopBtn :title="`${data.patientName} ${data.patientAge}岁 ${data.patientSex == 1 ? '男' : '女'}`"></TopBtn>
		<view class="flex-sp-center topNavBtn" v-if="scrollTop < 40 && infoData.id == id&&infoData.status==2">
			<view class="close" @click="endOutpatientInfo()">· 点击结束问诊</view>
			<view class="btn flex-center-center" @click="
          goInfo(
            'pages/ConsultationRoom/addConsultation/addConsultation',
            infoData.id,
            infoData.groupId
          )
        ">
				发起会诊
			</view>
			<view class="btn Refunds flex-center-center" @click="gobl(id, data.patientId)">点击退费</view>
		</view>
		<view class="swiperBox zhankong" v-if="scrollTop > 140"></view>
		<view :class="scrollTop > 140 ? 'topswiper swiperBox' : 'swiperBox'">
			<uni-swiper-dot :info="data.outpatientInfoRespVOList" :current="current" field="content" :mode="mode"
				:dots-styles="dotsStyles">
				<swiper class="swiper" @change="change" :current="current">
					<swiper-item v-for="(n, index) in data.outpatientInfoRespVOList" :key="index">
						<view class="swiper-item flex-sp-center">
							<image src="@/static/ConsultationRoom/tw.png" mode=""></image>
							<view class="time">
								<uni-dateformat :date="n.receiveTime" format="yyyy-MM-dd"></uni-dateformat>
								<view class="">
									{{ n.consultationMethodName }}
								</view>
							</view>
							<view class="dqwz" v-if="n.id == id">当前问诊</view>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="info" v-if="infoData">
			<view class="currency_card">
				<view class="currency_title">病情资料</view>
				<view class="flex-center-center">
					<DiseaseCondition v-if="infoData.consultationFormRespVO" :data="infoData.consultationFormRespVO">
					</DiseaseCondition>
					<image class="qxt" v-else src="@/static/DefaultGraph/bqzl.png" mode=""></image>
				</view>
			</view>
			<view class="currency_card" v-if="infoData.consultationAdviceRespVO"
				@click="goInfo('pages/ConsultationRoom/proposaDetails/proposaDetails', id)">
				<view class="currency_title">问诊建议</view>
				<view class="greyBg">
					{{ infoData.consultationAdviceRespVO.proposal }}
				</view>
			</view>
			<view class="currency_card" v-if="infoData.prescriptionInfoRespVO" @click="
          goInfo(
            'pages/ConsultationRoom/PrescriptionDetails/PrescriptionDetails',
            infoData.prescriptionInfoRespVO.id
          )
        ">
				<view class="currency_title">处方详情</view>
				<view class="greyBg DrugList">
					<view v-for="(n, i) in JSON.parse(infoData.prescriptionInfoRespVO.drugName)">
						{{ n.name }}
						<text v-if="i < JSON.parse(infoData.prescriptionInfoRespVO.drugName).length - 1">
							,
						</text>
					</view>
				</view>
			</view>
		</view>
		<view class="btmBtn flex-sp-center" v-if="infoData.status == 2">
			<view class="flex-center-center" @click="goInfo('pages/ConsultationRoom/proposal/proposal', infoData.id)">
				问诊建议
			</view>
			<view class="kai flex-center-center"
				@click="goInfo('pages/ConsultationRoom/Prescription/Prescription', infoData.id)">
				开具处方
			</view>
			<view class="chat flex-center-center" @click="goToChat(infoData.groupId)">去沟通</view>
		</view>
		<view class="kong"></view>
	</view>
</template>

<script>
	import {
		SwitchConversation
	} from '@/utils/TIM'
	import {
		getPatientOutpatientInfo,
		endOutpatientInfo
	} from '@/api/ConsultationRoom'

	export default {
		data() {
			return {
				info: [{
						content: '内容 A',
					},
					{
						content: '内容 B',
					},
					{
						content: '内容 C',
					},
				],
				current: 0,
				mode: 'default',
				dotsStyles: {
					backgroundColor: 'rgba(59,108,254,0.3)',
					border: '1px rgba(59,108,254,0.3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(59,108,254,0.9)',
					selectedBorder: '1px rgba(59,108,254,0.9) solid',
				},
				scrollTop: 0,
				id: '',
				data: {
					patientSex: '',
					patientAge: '',
					patientName: '',
					outpatientInfoRespVOList: [],
				},
				infoData: [],
			}
		},
		onShow() {
			if(this.id){
				this.getPatientOutpatientInfo()
			}
			// console.info('DC: 咨询详情页 onShow')
			// let that = this
			// uni.$once('show', function(data) {
			// 	that.getPatientOutpatientInfo()
			// })
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
			}
			this.getPatientOutpatientInfo()
		},
		onPageScroll(event) {
			this.scrollTop = event.scrollTop
		},
		methods: {
			// 进入聊天窗口
			goToChat(groupId) {
				if (!groupId) {
					console.warn('DC: 当前会诊没有关联群会话')
					uni.showToast({
						title: '当前会诊没有关联群会话',
						duration: 200,
						icon: 'none',
						mask: true,
					})
					return
				}

				const conversationID = `GROUP${groupId}`
				SwitchConversation(conversationID)
			},
			endOutpatientInfo() {
				var that = this
				console.log(this.infoData.medicalRecordId, this.infoData.consultationAdviceRespVO)
				if (this.infoData.medicalRecordId === null &&
					(this.infoData.consultationAdviceRespVO === undefined || this.infoData.consultationAdviceRespVO === null)) {
					uni.showModal({
						title: '提示',
						content: '请填写病历或问诊建议',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: `/pages/ConsultationRoom/proposal/proposal?id=${that.id}`,
								})
							}
						},
					})
					return
				}
				uni.showModal({
					title: '提示',
					content: '是否确定结束问诊',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '问诊结束中',
								mask: true,
							})
							endOutpatientInfo({
								id: that.id,
							}).then(res => {
								uni.showToast({
									title: '操作成功',
									duration: 200,
									icon: 'none',
									mask: true,
								})
								setTimeout(() => {
									uni.hideLoading()
									uni.$emit('show', true)
									uni.navigateBack({
										delta: 1,
									})
								}, 200)
							})
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					},
				})
			},
			getPatientOutpatientInfo() {
				getPatientOutpatientInfo({
					outpatientId: this.id,
				}).then(res => {
					this.data = res.data
					this.current = res.data.outpatientInfoRespVOList.findIndex(item => item.id == this.id)
					this.infoData = res.data.outpatientInfoRespVOList[this.current]
					console.log(this.current, this.infoData)
				})
			},
			change(e) {
				uni.showLoading({
					title: '加载中',
					mask: true,
				})
				setTimeout(() => {
					uni.hideLoading()
					this.current = e.detail.current
					this.infoData = this.data.outpatientInfoRespVOList[this.current]
				}, 200)
			},
			gobl(id, patientId) {
				var prescriptionId = null
				// if (this.infoData.prescriptionInfoRespVO.id) {
				//   prescriptionId = this.infoData.prescriptionInfoRespVO.id
				// }
				uni.navigateTo({
					url: `/pages/ConsultationRoom/medicalRecord/medicalRecord?id=${id}&patientId=${patientId}&prescriptionId=${prescriptionId}`,
				})
			},
			goInfo(e, id, groupId) {
				var updata = 0

				if (e == 'pages/ConsultationRoom/addConsultation/addConsultation') {
					uni.navigateTo({
						url: `/${e}?id=${id}&updata=${updata}&groupId=${groupId}`,
					})
					return
				}

				if (
					e == 'pages/ConsultationRoom/proposal/proposal' &&
					this.infoData.consultationAdviceRespVO
				) {
					updata = this.infoData.consultationAdviceRespVO.id
				}

				if (
					e == 'pages/ConsultationRoom/Prescription/Prescription' &&
					this.infoData.medicalRecordId === null
				) {
					var that = this
					uni.showModal({
						title: '提示',
						content: '请填写病历',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: `/pages/ConsultationRoom/medicalRecord/medicalRecord?id=${that.id}`,
								})
							}
						},
					})
					return
				}

				if (
					e == 'pages/ConsultationRoom/Prescription/Prescription' &&
					this.infoData.prescriptionInfoRespVO
				) {
					if (this.infoData.prescriptionInfoRespVO.auditStatus == 2) {
						updata = this.infoData.prescriptionInfoRespVO.id
						// uni.navigateTo({
						// 	url: `/pages/ConsultationRoom/PrescriptionDetails/PrescriptionDetails?type=2&id=${id}&updata=${updata}`,
						// })
						return
					} else {
						uni.showToast({
							title: '处方审核中',
							duration: 2000,
							icon: 'none',
							mask: true,
						})
						return
					}
				}

				if (id) {
					uni.navigateTo({
						url: `/${e}?id=${id}&updata=${updata}`,
					})
				} else {
					uni.navigateTo({
						url: `/${e}`,
					})
				}
			},
		},
	}
</script>

<style lang="less">
	.kong {
		height: 200rpx;
	}

	.zhankong {
		height: 113rpx;
	}

	.swiperBox {
		padding: 30rpx 30rpx 0;
		box-sizing: border-box;
	}

	.container {
		padding-top: 230rpx;
	}

	.topNavBtn {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		position: fixed;
		top: 128rpx;
		background-color: #fff;
		z-index: 2;

		.close {
			font-weight: 500;
			font-size: 30rpx;
			color: #ff2222;
		}

		.btn {
			width: 171rpx;
			height: 70rpx;
			background: #3b6cfe;
			border-radius: 10rpx;
			border: 2rpx solid #3b6cfe;
			box-sizing: border-box;
			font-weight: 500;
			font-size: 28rpx;
			color: #ffffff;
		}

		.Refunds {
			background: #ffffff;
			color: #3b6cfe;
		}
	}

	.btmBtn {
		width: 750rpx;
		height: 115rpx;
		background: #ffffff;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		font-weight: 500;
		font-size: 26rpx;

		&>view {
			width: 181rpx;
			height: 90rpx;
			background: rgba(153, 153, 153, 0.2);
			border-radius: 20rpx;
			color: #999999;
		}

		.kai {
			background: #ffffff;
			border-radius: 20rpx;
			border: 2px solid #3e6efe;
			box-sizing: border-box;
			color: #3e6efe;
		}

		.chat {
			width: 256rpx;
			height: 90rpx;
			background: #3e6efe;
			color: #ffffff;
		}
	}

	.swiper {
		width: 100%;
		height: 113rpx;

		.swiper-item {
			width: 690rpx;
			height: 113rpx;
			background: #ffffff;
			border-radius: 20rpx;
			margin: auto;
			padding: 19rpx;
			box-sizing: border-box;

			image {
				width: 69rpx;
				height: 69rpx;
			}

			.time {
				flex: 1;
				margin: 0 20rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;

				view {
					font-weight: 500;
					font-size: 22rpx;
					color: #999999;
				}
			}

			.dqwz {
				height: 69rpx;
				font-size: 24rpx;
				color: #3b6cfe;
			}
		}
	}

	.swiperFlex {
		visibility: hidden;
	}

	.topswiper {
		width: 100%;
		position: fixed;
		top: 128rpx;
		background-color: #fafafa;
		z-index: 2;
	}

	.greyBg {
		width: 649rpx;
		min-height: 72rpx;
		background: #fafafa;
		border-radius: 10rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		padding: 29rpx 16rpx;
		box-sizing: border-box;
	}

	.DrugList {
		display: flex;
		flex-wrap: wrap;
	}

	.info {
		padding: 30rpx;

		.currency_card {
			position: relative;

			.state {
				position: absolute;
				right: 0;
				top: 0;
				padding: 0 5rpx;
				min-width: 100rpx;
				height: 50rpx;
				background: #f9fbfe;
				font-size: 28rpx;
				color: #3e6efe;
				text-align: center;
				line-height: 50rpx;
				border-radius: 0 21rpx;
			}
		}

		&>view {
			margin-bottom: 27rpx;
		}

		.currency_info {
			margin-top: 21rpx;

			&:last-child {
				margin-top: 0rpx;
			}

			.Card_row {
				display: flex;
				font-weight: 500;
				font-size: 28rpx;
				color: #333;
				align-items: center;
				min-height: 50rpx;

				.title {
					width: 150rpx;
					color: #999;
				}
			}
		}
	}
</style>